<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom-2-样式操作</title>
    <style>

        .box{
            width: 100px;
            height: 100px;
            background-color: lime;
        }

        .left{
            float: left;
        }
    </style>
</head>
<body>
<div>message</div>
<button id="btnShow">
    显示
</button>
<button id="btnHide">
    隐藏
</button>
<button id="btnToggle">
    切换
</button>

</body>

<script>

    /*
     *  JavaScript的样式操作
     *     1. 直接操作style属性
     *     2. 使用dom模型className ，直接对应html中的class属性
     *     3. 使用dom模型classList,把class放到一个集合(数组)中
    * */

    var box=  document.getElementsByTagName('div')[0];

/*  box.style.display ='none';
  box.style.display ='block';
  box.style.color="green";*/


  //box.className = "box left";

/*    box.classList.add('box');
    box.classList.add('left');*/


  var btnShow=document.getElementById('btnShow');
    var btnHide=document.getElementById('btnHide');
   var btnToggle=  document.getElementById('btnToggle');
   btnToggle.onclick = btnToggleClick;
    btnShow.onclick = btnShowClick;
    btnHide.onclick=btnHideClick;

function btnShowClick() {
    var box=  document.getElementsByTagName('div')[0];
    //box.style.display = 'block';
    box.style.visibility = "visible";

}

function btnHideClick() {
    var box=  document.getElementsByTagName('div')[0];
   // box.style.display = 'none';
    box.style.visibility = "hidden";
}

/*如何实现切换*/
    
    
function btnToggleClick() {
    var box=  document.getElementsByTagName('div')[0];

   /* if (box.style.display=='block'||box.style.display==''){
        box.style.display='none'
    }else {
        box.style.display='block'
    }*/

/*    if(box.style.display!='none'){
        box.style.display='none'
    }else {
        box.style.display='block'
    }*/

        if(box.style.visibility!='hidden'){
            box.style.visibility='hidden';
        }else {
            box.style.visibility='visible';
        }


}    

</script>
</html>